<script setup lang="tsx">
import { ElButton } from 'element-plus';
import { ref } from 'vue';
import { LogDeleteAgo } from '@/constants/custom';
import { fetchClearUploadLog, fetchGetUploadLogByPage, validRowSign } from '@/service/api';
import { useTable, useTableOperate } from '@/hooks/common/table';
import { $t } from '@/locales';
import UploadLogSearch from '@/views/log/uploadlog/modules/uploadlog-search.vue';

defineOptions({ name: 'UploadLog' });

const {
  columns,
  columnChecks,
  data,
  getData,
  getDataByPage,
  loading,
  mobilePagination,
  searchParams,
  resetSearchParams
} = useTable({
  apiFn: fetchGetUploadLogByPage,
  showTotal: true,
  apiParams: {
    current: 1,
    size: 10,
    condition: {}
  },
  columns: () => [
    { prop: 'index', label: $t('common.index'), width: 64 },
    { prop: 'filename', label: '文件名称', minWidth: 200, align: 'left' },
    { prop: 'originalFilename', label: '文件原名', minWidth: 200, align: 'left' },
    { prop: 'size', label: '文件大小(B)', minWidth: 120, align: 'left' },
    { prop: 'basePath', label: '基础路径', minWidth: 120, align: 'left' },
    { prop: 'path', label: '文件路径', minWidth: 120, align: 'left' },
    { prop: 'ext', label: '文件扩展名', minWidth: 120, align: 'left' },
    { prop: 'contentType', label: '文件类型', minWidth: 120, align: 'left' },
    { prop: 'platform', label: '平台', minWidth: 120, align: 'left' },
    { prop: 'thUrl', label: '缩略图地址', minWidth: 200, align: 'left' },
    { prop: 'thFilename', label: '缩略图名称', minWidth: 200, align: 'left' },
    { prop: 'thSize', label: '缩略图大小(B)', minWidth: 120, align: 'left' },
    { prop: 'thContentType', label: '缩略图类型', minWidth: 120, align: 'left' },
    { prop: 'createTime', label: '上传时间', width: 200, align: 'left' },
    {
      prop: 'operate',
      label: $t('common.operate'),
      align: 'center',
      fixed: 'right',
      width: 100,
      formatter: row => (
        <div class="flex-center">
          <ElButton type="warning" plain size="small" onClick={() => validateSign('t_sys_log_upload', row.id)}>
            验签
          </ElButton>
        </div>
      )
    }
  ]
});

const {
  // drawerVisible,
  // operateType,
  // editingData,
  // handleAdd,
  // handleEdit,
  checkedRowKeys
  // onBatchDeleted,
  // onDeleted
  // closeDrawer,
} = useTableOperate(data, getData);

const ago = ref<'DAY' | 'WEEK' | 'MONTH' | 'YEAR' | 'ALL'>('MONTH');

// 处理
async function handleClearLog() {
  const { error } = await fetchClearUploadLog(ago.value);
  if (error) return;
  window.$message?.success({
    message: $t('common.operateSuccess')
  });
  await getDataByPage();
}

// 日志行数据验签
async function validateSign(tableName: string, rowId: CommonType.IdType) {
  const { error } = await validRowSign(tableName, rowId);
  if (!error) {
    window.$message?.success?.('验签成功');
  }
}
</script>

<template>
  <ElContainer>
    <ElHeader>
      <ElCard class="card-wrapper" :body-style="{ paddingTop: 0, paddingBottom: 0 }">
        <UploadLogSearch v-model="searchParams.condition" @reset="resetSearchParams" @search="getDataByPage" />
      </ElCard>
    </ElHeader>
    <ElMain>
      <ElCard class="h-full sm:flex-1-hidden card-wrapper">
        <template #header>
          <div class="flex flex-wrap items-center justify-between gap-5">
            <p>操作日志列表</p>
            <TableHeaderOperation v-model:columns="columnChecks" :loading="loading" @refresh="getData">
              <ElSelect v-model="ago" class="w10rem">
                <template v-for="item in Object.keys(LogDeleteAgo)" :key="item">
                  <ElOption :label="LogDeleteAgo[item]" :value="item" />
                </template>
              </ElSelect>
              <ElPopconfirm :title="`是否清除 ${LogDeleteAgo[ago]} 的日志？`" @confirm="handleClearLog">
                <template #reference>
                  <ElButton type="danger" plain>清除日志</ElButton>
                </template>
              </ElPopconfirm>
            </TableHeaderOperation>
          </div>
        </template>
        <div class="h-[calc(100%-45px)]">
          <ElTable
            v-loading="loading"
            height="100%"
            border
            class="sm:h-full"
            :data="data"
            row-key="id"
            show-overflow-tooltip
            @selection-change="checkedRowKeys = $event"
          >
            <ElTableColumn v-for="col in columns" :key="col.prop" v-bind="col" />
          </ElTable>
        </div>
        <div class="mt15px flex justify-end">
          <ElPagination
            v-if="mobilePagination.total"
            background
            layout="total,prev,pager,next,sizes"
            v-bind="mobilePagination"
            @current-change="mobilePagination['current-change']"
            @size-change="mobilePagination['size-change']"
          />
        </div>
      </ElCard>
    </ElMain>
  </ElContainer>
</template>

<style scoped>
.el-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 10px;

  .el-header {
    padding: 0;
    height: auto;
  }

  .el-main {
    padding: 0;
    height: 0;
    flex: 1;
  }
}

:deep(.el-card) {
  display: flex;
  flex-direction: column;
}

:deep(.el-card .el-card__body) {
  flex: 1;
  height: 0;
}

:deep(.el-table .cell) {
  padding: 0 10px;
}
</style>
